<%= include ic/header.html %>
<style>
#main{width:1024px;margin:auto;text-align:center;padding-bottom:20px;}
.am-slider{width:100%;height:475px;overflow:hidden;position:relative;}
.am-slider-a1{-webkit-box-shadow:none;box-shadow:none;}
.am-slider-a1 .am-control-nav li a{background:#A6B9D4;}
.am-slider-a1 .am-control-nav li a.am-active{background:#2D2D85;}
#ctrBar{width:100%;display:block;position:absolute;top:0;left:0;overflow:hidden;}
#ctrBar div{width:16px;height:390px;float:left;margin:0 90px;background:url(/i/btnPrev.png) no-repeat center center;cursor:pointer;}
#ctrBar #btnNext{float:right;background:url(/i/btnNext.png) no-repeat center center;}
.catagory{width:1024px;margin:20px auto 0;}
.catagory2 img{border:1px solid #f1f1f1;}
#dpBar{height:435px;overflow:hidden}
#dpBar img{width:190px;height:435px;border:1px solid #fff;}
#dpBar div{margin-right:15px;}
#dpBar div:last-child{margin-right:0;}
#dpBar a:hover img{border:1px solid #2D2D85;}
#catagoryTitle1{width:800px;height:20px;margin:40px auto 10px;background:url(/i/index_title1.png) no-repeat center center;}
#catagoryTitle2{width:800px;height:20px;margin:40px auto 10px;background:url(/i/index_title2.png) no-repeat center center;}
</style>
<div class="am-cf" id="main">
  <% if(slides.length>0){ %>
  <div class="am-slider am-slider-a1">
    <ul class="am-slides">
      <% for(var i=0;i<slides.length;i++){ %>
        <li>
          	<a href="<%= slides[i].url %>" class="" target="_blank"><img src="/p?id=<%= slides[i].imgId %>"></a>
        </li>
      <% } %>
    </ul>
  </div>
  <div id="ctrBar">
    <div id="btnPrev" onclick="$('.am-slider').flexslider('prev')"></div>
    <div id="btnNext" onclick="$('.am-slider').flexslider('next')"></div>
  </div>
  <% } %>
  <div class="am-cf"></div>
  <div id="catagoryTitle1"></div>
  <div class="am-cf"></div>
  <div class="am-cf catagory">
    <div class="am-fl"><a href="<%= catagory.lefttop.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.lefttop.imgId %>"></a></div>
    <div class="am-fr"><a href="<%= catagory.righttop.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.righttop.imgId %>"></a></div>
  </div>
  <div class="am-cf"></div>
  <div class="am-cf catagory">
    <div class="am-fl"><a href="<%= catagory.leftbottom.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.leftbottom.imgId %>"></a></div>
    <div class="am-fr"><a href="<%= catagory.rightbottom.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.rightbottom.imgId %>"></a></div>
  </div>
  <div class="am-cf"></div>
  <div class="am-cf catagory">
    <a href="<%= catagory.bottom.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.bottom.imgId %>"></a>
  </div>
  <div class="am-cf"></div>
  <div id="catagoryTitle2"></div>
  <div class="am-cf"></div>
  <div class="am-cf catagory catagory2" id="dpBar">
    <div class="am-fl"><a href="<%= catagory.dp1.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.dp1.imgId %>"></a></div>
    <div class="am-fl"><a href="<%= catagory.dp2.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.dp2.imgId %>"></a></div>
    <div class="am-fl"><a href="<%= catagory.dp3.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.dp3.imgId %>"></a></div>
    <div class="am-fl"><a href="<%= catagory.dp4.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.dp4.imgId %>"></a></div>
    <div class="am-fl"><a href="<%= catagory.dp5.url %>" class="" target="_blank"><img src="/p?id=<%= catagory.dp5.imgId %>"></a></div>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {
  $('.am-slider').flexslider({directionNav:false,start:function(){init()}});

});
function init(){
  $("#ctrBar").appendTo(".am-slider");
}
</script>
